<!DOCTYPE html>
<html>
    <head>
        <title>lazyload组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js"></script>
        <script src="../highlight/shCore.js"></script>
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
        <script>
            require(["lazyload/avalon.lazyload"], function() {
                vmodel = avalon.define("demo", function(vm) {
                    vm.lazyload = {
                        effect: "fadeIn"
                    }
                })
                avalon.scan()
            })
        </script>
    </head>
    <body>
        <div class="wrapper"  ms-controller="demo">
            <h1>lazyload懒加载组件-自定义effect(加载效果)和各自delay(加载延迟)</h1>
            <fieldset>
                <legend>渐入效果</legend>
                <img alt="" 
                data-lazyload-original="images/placeholderimg1.jpg" 
                ms-lazyload>
            </fieldset>
            <fieldset>
                <legend>左侧插入效果</legend>
                <img alt="" data-lazyload-original="images/placeholderimg2.jpg" 
                data-lazyload-itemeffect="slideX" 
                data-lazyload-itemdelay="1000"
                ms-lazyload>
            </fieldset>
            <fieldset>
                <legend>上侧插入效果</legend>
                <img alt="" data-lazyload-original="images/placeholderimg3.jpg" 
                data-lazyload-itemeffect="slideY" 
                data-lazyload-itemdelay="1500" 
                ms-lazyload>
            </fieldset>
            <pre ms-skip class="brush:html;gutter:false;toolbar:false">
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;lazyload组件&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;script src="../avalon.js"&gt;&lt;/script&gt;
        &lt;script src="../highlight/shCore.js"&gt;&lt;/script&gt;
        &lt;link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/&gt;
        &lt;script&gt;
            require(["lazyload/avalon.lazyload"], function() {
                avalon.define("demo", function(vm) {
                    vm.lazyload = {
                        loadEffect: "fadeIn"
                    }
                })
                avalon.scan()
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="wrapper"  ms-controller="demo"&gt;
            &lt;h1&gt;lazyload懒加载组件-自定义效果&lt;/h1&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;渐入效果&lt;/legend&gt;
                &lt;img alt="" 
                data-lazyload-original="images/placeholderimg1.jpg" 
                ms-lazyload&gt;
            &lt;/fieldset&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;左侧插入效果&lt;/legend&gt;
                &lt;img alt="" data-lazyload-original="images/placeholderimg2.jpg" 
                ms-lazyload-effect="slideX" 
                data-lazyload-itemdelay="1000" 
                ms-lazyload&gt;
            &lt;/fieldset&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;上侧插入效果&lt;/legend&gt;
                &lt;img alt="" data-lazyload-original="images/placeholderimg3.jpg" 
                ms-lazyload-effect="slideY" 
                data-lazyload-itemdelay="1500" 
                ms-lazyload&gt;
            &lt;/fieldset&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
            </pre>
        </div>
    </body>
</html>

